<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <view class="Wrapper">
            <view class="list">
                <text class="title">商品:</text>
                <view class="content" @click="selectShop">
                    <view class="noGoods" v-if="!goodsItem">
                        <view class="iconfont icon-tianjia color_cc size60"></view>
                        <text class="color_cc size28 m-top10">点击选择商品</text>
                    </view>
                    <view class="row" v-else>
                        <image :src="$imgUrls(goodsItem.img)" mode="aspectFill" class="goodsImg"></image>
                        <view class="flex-1 d-flex f-column j-sb">
                            <text class="black size30 bold500 ellipsis_2">{{ goodsItem.name }}</text>
                            <view class="d-flex a-center color_ff4 bold">
                                <text class="size26">￥</text>
                                <text class="size30">{{ goodsItem.price }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="list">
                <text class="title">售价:</text>
                <input type="digit" v-model="price" class="priceNum" placeholder="请输入售价" />
            </view>
            <view class="list">
                <text class="title">售量:</text>
                <input type="number" v-model="num" class="priceNum" placeholder="请输入售量" />
            </view>

            <view class="allocation">
                <view class="row j-sb a-center">
                    <text class="black size32 bold500">活动折扣配置</text>
                    <view class="Add" @click="Add">添加</view>
                </view>
                <view class="line" v-for="(item, index) in snatch_price" :key="index">
                    <view class="omine">
                        <input type="number" class="numone" v-model="item.start" />
                        <view class="textUVE">单</view>
                    </view>
                    <text class="lineText">至</text>
                    <view class="omine">
                        <input type="number" class="numone" v-model="item.end" />
                        <view class="textUVE">单</view>
                    </view>
                    <view class="omineZhe">
                        <input type="digit" class="numone" v-model="item.discount" :max="10" :min="0" />
                        <view class="textUVE">折</view>
                    </view>
                    <view class="iconfont icon-butongguo size42 color_ff4" @click="remove(index)"></view>
                </view>
            </view>

            <!-- 实物图 -->
            <view class="Physical">
                <text class="title">实物图</text>
                <view class="PhysicalBox">
                    <view class="list" v-for="(item, index) in prove" :key="index">
                        <image :src="$imgUrls(item)" mode="aspectFill" class="wh bor_radius_10"></image>
                        <view class="iconfont icon-butongguo size42 color_ff4" @click.stop="Phyremove(index)"></view>
                    </view>
                    <view class="list" @click="uploadImg">
                        <view class="iconfont icon-tianjia color_cc size80"></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="Btn cancel" @click="back()">取消</view>
            <view class="Btn config" @click="addSnatch">发布并支付质保金</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                goodsItem: '',
                title: '发布',
                snatch_type: 1,
                price: '',
                num: '',
                snatch_price: [], // 配置
                prove: [] // 实物图
            };
        },
        onLoad(opt) {
            if (opt.snatch_type) this.snatch_type = opt.snatch_type;
        },
        onShow() {
            let that = this;
            uni.$on('updateData', function (data) {
                that.goodsItem = data;
            });
        },

        methods: {
            Add() {
                let newObj = {
                    start: 0,
                    end: 0,
                    discount: 0
                };
                this.snatch_price.push(newObj);
            },
            remove(index) {
                this.snatch_price.splice(index, 1);
            },
            async uploadImg() {
                const result = await this.$common.chooseImage(9);
                this.prove = [...this.prove, ...result];
            },
            Phyremove(index) {
                this.prove.splice(index, 1);
            },
            selectShop() {
                this.toUrl(`selectShop`);
            },
            addSnatch() {
                if (!this.goodsItem) return this.$Toast('请选择商品');
                if (!this.price) return this.$Toast('请输入售价');
                if (!this.num) return this.$Toast('请输入销量');
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SnatchApi/addSnatch',
                        data: {
                            snatch_type: this.snatch_type,
                            goods_id: this.goodsItem.goods_id,
                            price: this.price,
                            num: this.num,
                            snatch_price: JSON.stringify(this.snatch_price),
                            prove: this.prove.join()
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.Play(result);
                    });
            },
            async Play(data) {
                const result = await this.$pop.getPayment(data);
                if (!result) return;
                const palyResult = await this.$Modals('提示', '支付成功', '返回', '我的发布');
                if (!palyResult) return this.$back();
                this.toUrl(`myPost?snatch_type=1`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 180rpx;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 710rpx;
        margin: 0 auto;
        .list {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            margin-top: 24rpx;
            .title {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                .noGoods {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 20rpx 0;
                }
                .goodsImg {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 10rpx;
                    border: 1px solid $page;
                    margin-right: 20rpx;
                }
            }
            .priceNum {
                flex: 1;
                height: 80rpx;
                color: #000;
                font-size: 32rpx;
            }
        }

        .allocation {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
            margin-top: 24rpx;
            display: flex;
            flex-direction: column;
            .Add {
                padding: 12rpx 30rpx;
                background-color: #ff0000;
                color: #fff;
                font-size: 30rpx;
                border-radius: 10rpx;
            }
            .line {
                width: 100%;
                margin-top: 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                .icon-butongguo {
                    position: absolute;
                    top: -14rpx;
                    right: -14rpx;
                    z-index: 100;
                    background-color: #fff;
                    border-radius: 50%;
                }
                .omine {
                    width: 210rpx;
                    height: 80rpx;
                    border: 1px solid #c9c9c9;
                    display: flex;
                    align-items: center;
                    .numone {
                        flex: 1;
                        height: 100%;
                        padding: 0 20rpx;
                        color: #000;
                        font-size: 40rpx;
                        font-weight: bold;
                    }
                    .textUVE {
                        width: 76rpx;
                        height: 100%;
                        background-color: #c9c9c9;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 32rpx;
                        color: #666;
                    }
                }
                .omineZhe {
                    width: 170rpx;
                    height: 80rpx;
                    border: 1px solid #c9c9c9;
                    display: flex;
                    align-items: center;
                    .numone {
                        flex: 1;
                        height: 100%;
                        padding: 0 10rpx;
                        color: #000;
                        font-size: 40rpx;
                        font-weight: bold;
                    }
                    .textUVE {
                        width: 76rpx;
                        height: 100%;
                        background-color: #c9c9c9;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 32rpx;
                        color: #666;
                    }
                }
                .lineText {
                    color: #666;
                    font-size: 32rpx;
                }
            }
        }

        .Physical {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
            margin-top: 24rpx;
            display: flex;
            flex-direction: column;
            .title {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
            }
            .PhysicalBox {
                width: 100%;

                display: grid;
                grid-template-columns: repeat(3, 1fr);
                row-gap: 10rpx;
                column-gap: 20rpx;
                .list {
                    height: 220rpx;
                    border: 1px solid #f1f1f1;
                    border-radius: 10rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    position: relative;
                    .icon-butongguo {
                        background-color: #fff;
                        border-radius: 50%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: 100;
                    }
                }
            }
        }
    }
    .footer {
        width: 100%;
        padding: 0 20rpx;
        position: fixed;
        bottom: 50rpx;
        left: 0;
        z-index: 200;
        display: flex;
        justify-content: space-around;
        .Btn {
            width: 320rpx;
            height: 88rpx;
            border-radius: 44rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cancel {
            background-color: #c9c9c9;
            color: #666;
            font-size: 36rpx;
        }
        .config {
            background-color: var(--color);
            color: #fff;
            font-size: 30rpx;
        }
    }
</style>
